<template>
  <div class="cart-main">
    <div class="title" v-if="isLogin">
      <div>共{{cartList.length}}件商品</div>
      <div></div>
      <div @click="manage">{{manageCart ? '管理' : '完成'}}</div>
    </div>
    <div class="header" v-if="isLogin">
      <div>30天无忧退货</div>
      <div>48小时快速退款</div>
      <div>满88元包邮</div>
    </div>
    <div class="cart" v-show="isLogin">
      <i-swipeout i-class="i-swipeout-demo-item" :actions="actions" :key="index" v-for="(item, index) in cartList" @change="deleteGoods(item.id, index)">
        <div slot="content">
          <i-checkbox-group class="checkbox-grou" :current="current" @change="handleFruitChange">
              <i-checkbox position="left" color="#b4282d" :value="index"></i-checkbox>
          </i-checkbox-group>
          <img mode="widthFix" :src="item.list_pic_url">
          {{current[item.id]}}
          <div class="i-swipeout-des">
                <div class="i-swipeout-des-h2">{{item.name}}</div>
                <div class="i-swipeout-des-detail">￥ {{item.retail_price}}</div>
          </div>
          <!-- <div class="count">x {{item.number}}</div> -->
          <view class="count">
              <i-input-number :id="index" :value="item.count" min="1" max="999" @change="handleChange" />
          </view>
        </div>
      </i-swipeout>
    </div>
    <div class="footer" v-show="isLogin">
      <div class="check-all">
        <i-radio color="#b4282d" value="全选" :checked="checked" @change="checkAll">
        </i-radio>
      </div>
      <div class="handle">
        <div class="payment" v-if="manageCart">
          <div class="total">
            合计：<span>￥{{total}}</span>
          </div>
          <div class="close">结算({{current.length}})</div>
        </div>
        <div class="manage" v-else>
          <div class="collect">移入收藏夹</div>
          <div class="delete" @click="deleteChecked()">删除({{current.length}})</div>
        </div>
      </div>
    </div>
    <div v-show="!isLogin">请登陆</div>
  </div>
</template>

<script>
import {post, showSuccess} from '@/utils'

export default {
  data () {
    return {
      actions: [
        {
          name: '删除',
          color: '#fff',
          fontsize: '20',
          width: 100,
          icon: 'delete',
          background: '#ed3f14'
        }
      ],
      user: {},
      isLogin: false,
      current: [],
      cartList: [],
      checked: false,
      manageCart: true,
      total: 0
    }
  },
  async onShow () {
    this.current = []
    this.user = wx.getStorageSync('userInfo')
    if (this.user.openId) {
      this.isLogin = true
      const res = await post('/weapp/cart/cartData', {
        openId: this.user.openId
      })
      this.cartList = res.cartData
    } else {
      this.isLogin = false
    }
  },
  methods: {
    handleFruitChange ({ target = {} }) {
      const index = this.current.indexOf(target.value)
      index === -1 ? this.current.push(target.value) : this.current.splice(index, 1)
      this.changeTotal()
    },
    async handleChange ({target}) {
      let count = 0
      if (this.cartList[target.id].count > target.value) {
        count = -1
      } else {
        count = 1
      }
      this.cartList[target.id].count = target.value
      await post('/weapp/cart/addCart', {
        openId: this.user.openId,
        goodsId: this.cartList[target.id].id,
        count: count
      })
      this.changeTotal()
    },
    checkAll ({ target = {} }) {
      this.checked = target.current
      this.current = []
      if (target.current) {
        for (let i = 0; i < this.cartList.length; i++) {
          this.current.push(`${i}`)
        }
      } else {
        this.current = []
      }
      this.changeTotal()
    },
    async deleteGoods (id, index) {
      const idArr = []
      idArr[0] = id
      const res = await post('/weapp/cart/deleteGoods', {
        id: idArr
      })
      this.current.sort((a, b) => {
        return a - b
      })
      this.cartList.splice(index, 1)
      this.current.splice(this.current.length - 1, 1)
      this.changeTotal()
      showSuccess(res.msg)
    },
    async deleteChecked () {
      if (this.current.length === 0) return
      const idArr = []
      for (let i = 0; i < this.current.length; i++) {
        idArr.push(this.cartList.filter((item) => {
          return item.id === this.cartList[this.current[i]].id
        })[0].id)
      }
      this.current.sort((a, b) => {
        return a - b
      })
      for (let i = 0; i < idArr.length; i++) {
        this.cartList.splice(this.current[0] - i, 1)
        this.current.splice(0, 1)
      }
      this.changeTotal()
      await post('/weapp/cart/deleteGoods', {
        id: idArr
      })
    },
    manage () {
      this.manageCart = !this.manageCart
    },
    changeTotal () {
      this.total = 0
      for (let i = 0; i < this.current.length; i++) {
        this.total += (Number(this.cartList[this.current[i]].retail_price) * Number(this.cartList[this.current[i]].count))
        if (this.current.length === this.cartList.length) {
          this.checked = true
        } else {
          this.checked = false
        }
      }
      if (this.current.length === 0) {
        this.checked = false
      }
    }
  }
}
</script>

<style lang="less">
.cart-main{
  .header{
    margin-top: 100rpx;
    display: flex;
    width: 100%;
    background: #f5f5f583;
    div{
      flex: 1;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      color: #494949;
      font-weight: 200;
      &:before{
        content: "";
        width: 8rpx;
        height: 8rpx;
        display: inline-block;
        border: 3rpx solid #b4282d;
        border-radius: 50%;
        vertical-align: middle;
        font-size: 16rpx;
        margin-right: 8rpx;
      }
    }
  }
  .title{
    display: flex;
    width: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    div{
      flex: 1;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      color: #b4282d;
    }
  }
}

.cart{
  width: 100%;
  margin-bottom: 110rpx;
  position: relative;
  img{
    width: 65px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 15rpx;
  }
  .checkbox-grou{
    display: inline-block;
    vertical-align: middle;
  }
  .i-swipeout-des{
    display: inline-block;
    vertical-align: middle;
    .i-swipeout-des-detail{
      color: #b4282d;
      line-height: 30px;
    }
  }
  .count{
    display: block;
    position: absolute;
    right: 30rpx;
    bottom: 30rpx;
  }
}

.footer{
  position: fixed;
  height: 110rpx;
  width: 100vw;
  background: #fff;
  left: 0;
  bottom: 0;
  display: flex;
  .check-all{
    flex:0 0 200rpx;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
  }
  .handle{
    flex: 1;
    .payment{
      display: flex;
      justify-content: flex-end;
      .total{
        display: inline-block;
        height: 110rpx;
        width: 200rpx;
        line-height: 110rpx;
        span{
          color: #b4282d;
        }
      }
      .close{
        display: inline-block;
        height: 110rpx;
        width: 200rpx;
        line-height: 110rpx;
        text-align: center;
        background: #b4282d;
        color: #fff;
      }
    }
    .manage{
      display: flex;
      justify-content: flex-end;
      .collect{
        height: 110rpx;
        width: 200rpx;
        line-height: 110rpx;
        text-align: center;
        background:#ebebeb;
      }
      .delete{
        display: inline-block;
        height: 110rpx;
        width: 200rpx;
        line-height: 110rpx;
        text-align: center;
        background: #b4282d;
        color: #fff;
      }
    }
  }
}
</style>
